<template>
	<div class="content">
		<div>
			<div class="f-between align-center">
				<p class="node-label mr8">请选择</p>
				<el-button type="primary" size="small" @click="handleOpenSelect">筛选器</el-button>
			</div>
			<div class="mt10">
				<el-space wrap>
					<el-tag v-for="tag in tagList" :key="tag.label" class="mx-1" closable type="info" @close="handleClose(tag)">
						{{ tag.label }}
					</el-tag>
				</el-space>
			</div>
		</div>

		<el-drawer
			v-model="drawer"
			title="选择"
			:with-header="false"
			size="80%"
			:lock-scroll="true"
			:before-close="handleBeforeClose"
		>
			<el-page-header @back="drawer = !drawer">
				<template #content>
					<span class="text-large font-600 mr-3"> 点击勾选 </span>
				</template>
			</el-page-header>
			<serviceUser @selection-change="onSelectionChange"></serviceUser>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import serviceUser from './serviceUser/index.vue'
import { useCommonStore } from '@/stores/common'

const { setGloablParams, setTempParams, setMoreSearch } = useCommonStore()

type Props = {
	modelValue: any
	userList: any
	nowRowData?: any
}
const props = withDefaults(defineProps<Props>(), {
	nowRowData: {},
})

const emit = defineEmits(['update:modelValue', 'update:userList'])

const drawer = ref(false)

const tagList = ref([])

watch(
	() => props.userList,
	(val) => {
		tagList.value = val || []
	},
	{ immediate: true }
)

const handleOpenSelect = () => {
	drawer.value = true
}

const handleBeforeClose = (done) => {
	setTempParams({})
	setGloablParams({})
	setMoreSearch({})
	done()
}

const handleClose = (tag) => {
	tagList.value.splice(tagList.value.indexOf(tag), 1)
}
const onSelectionChange = (data) => {
	data.map((row) => {
		const tempObj = {
			label: row.realName,
			value: row.userId,
		}
		const indexkey = tagList.value.findIndex((item) => item.value == row.userId)
		if (indexkey == -1) {
			tagList.value.push(tempObj)
		}
	})
	const userids = tagList.value.map((item) => item.value).join(',')
	emit('update:modelValue', userids)
	emit('update:userList', tagList.value)
}
</script>

<style scoped>
.content {
	margin: 0 auto;
	width: 80%;
}
</style>
